<template>
  <div>
    <h2>Home</h2>
    <div>
      <button @click="$router.back()">&lt;&lt;&lt;&lt;&lt;</button>
      <button @click="$router.forward()">&gt;&gt;&gt;&gt;&gt;</button>
      <button @click="$router.go(2)">----222---</button>
    </div>

    <!-- <router-link :to="{ name: 'music' }"> music </router-link>
    <router-link :to="{ name: 'news' }"> news </router-link> -->

    <!-- params传参字符串 -->
    <!-- <router-link to="/home/music/1/4min"> 华语music </router-link>
    <router-link to="/home/music/2/3min"> news </router-link> -->

    <!-- params传参对象写法 -->
    <!-- 注意事项: - to的对象写法中,如果和params一起使用,则不能书写path,只能使用name
    - 可选的params参数,要么不写,要么写一个undefined做为值,不能书写一个空字符串 -->
    <router-link
      :to="{
        name: 'music',
        params: {
          id: '1',
          time: undefined,
        },
      }"
    >
      华语music</router-link
    >

    <router-link
      :to="{
        name: 'music',
        params: {
          id: '2',
          time: undefined,
        },
      }"
    >
      粤语music
    </router-link>

    <!-- query传参字符串写法 -->
    <router-link to="/home/games?tit=qq飞车&version=2018"> 游戏1 </router-link>

    <!-- query传参对象写法 -->
    <router-link
      :to="{
        path: '/home/games',
        query: {
          tit: '暴力摩托',
          version: '2007',
        },
      }"
    >
      游戏2
    </router-link>

    <!-- 编程式路由导航 -->
    <div>
      <button @click="showSubHtml">html学科</button>
      <button @click="showSubCss">css学科</button>
      <button @click="showSubjs">js学科</button>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    showSubHtml() {
      this.$router.push("/home/subject?sub=html&t=easy");
    },
    showSubCss() {
      this.$router.replace({
        name: "subject",
        query: {
          sub: "css",
          t: "center",
        },
      });
    },
    showSubjs() {
      this.$router.push({
        name: "subject",
        params: {
          sub: "js",
          t: "nan",
        },
      });
    },
  },
};
</script>

<style>
</style>